<template>
  <div v-if="data">
    <div class="flex_between_bottom" style="padding-right: 20px;">
      <modal-header :left="`售后管理`" :right="title" @back="close" />
    </div>
    <div class="content-padding">
      <div class="signUp">
        <a-row class="see_row" style="width:100%;">
          <a-form-model ref="ruleForm" class="ant-advanced-form" :model="data" :rules="rules"
            :labelCol="{ style: 'width:108px' }">
            <div class="colTitle">学生基本信息</div>
            <a-col class="borderCol">
              <a-form-model-item label="姓名" prop="name" class="form-w-95">
               {{data?.name||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="性别" prop="sex" class="form-w-95">
                {{data?.sex||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="证件类型" prop="cardType" class="form-w-95">
                {{cardTypeName||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="证件号码" prop="cardId" class="form-w-95" >
                {{data?.cardId||'-'}}
              </a-form-model-item>
            </a-col>
            <div class="colTitle">报考基本信息</div>
            <a-col class="borderCol">
              <a-form-model-item label="报名批次" prop="registerBatch" class="form-w-95">
                {{registerBatchName||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="报名院校" prop="registerSchool" class="form-w-95">
                {{registerSchoolName||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="所报层次" prop="registerLevel" class="form-w-95">
                {{registerLevelName||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="所报专业" prop="registerMajor" class="form-w-95" :colon="false">
                {{data?.registerMajor||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="学习形式" prop="studyType" class="form-w-95">
                {{studyTypeName||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="学生状态" prop="studentStatus" class="form-w-95">
                {{studentStatusName||'-'}}
              </a-form-model-item>
            </a-col>
            <div class="colTitle">上传材料</div>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传正反面身份证" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <span v-if="data.identityImgUrls">
                  <img v-for="(item,index) in data.identityImgUrls" :key="index" :src="item" @click="previewImg([item])" style="width:200px;height:120px;margin-right:10px"/>
                </span>
                <span v-else>暂无图片信息</span>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传电子照片" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <span v-if="data.selfImgUrls">
                  <img :src="data.selfImgUrls" @click="previewImg([data.selfImgUrls])" style="width:200px;height:120px" />
                </span>
                <span v-else>暂无图片信息</span>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight">
              <a-form-model-item label="上传毕业证" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <span v-if="data.graduationImgUrls">
                  <img :src="data.graduationImgUrls" @click="previewImg([data.graduationImgUrls])" style="width:200px;height:120px" />
                </span>
                <span v-else>暂无图片信息</span>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight fileColHeight">
              <a-form-model-item label="学信网电子注册备案表" prop="attachmentId" :labelCol="{ style: 'width:138px;white-space:normal' }">
                <span v-if="data.recordFormUrls">
                  <img src="../../../assets/img/file.png" style="width:40px;height:40px">
                  <a :href="data.recordFormUrls" target="_blank">{{data.recordFormUrls}}</a>
                </span>
                <span v-else>暂无文件信息</span>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight fileColHeight">
              <a-form-model-item label="异地生证明材料" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <span v-if="data.nolocalProveUrls">
                  <img src="../../../assets/img/file.png" style="width:40px;height:40px">
                  <a :href="data.nolocalProveUrls" target="_blank">{{data.nolocalProveUrls}}</a>
                </span>
                <span v-else>暂无文件信息</span>
              </a-form-model-item>
            </a-col>
            <a-col class="borderColHeight fileColHeight">
              <a-form-model-item label="其他证明材料" prop="attachmentId" :labelCol="{ style: 'width:140px' }">
                <span v-if="data.othersProveUrls">
                  <img src="../../../assets/img/file.png" style="width:40px;height:40px">
                  <a :href="data.othersProveUrls" target="_blank">{{data.othersProveUrls}}</a>
                </span>
                <span v-else>暂无文件信息</span>
              </a-form-model-item>
            </a-col>
            <div class="colTitle">联系方式</div>
            <a-col class="borderCol">
              <a-form-model-item label="手机" prop="phone" class="form-w-95" :colon="false">
                {{data?.phone||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="Email" prop="email" class="form-w-95" :colon="false">
                {{data?.email||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol">
              <a-form-model-item label="联系地址" prop="address" class="form-w-95" :colon="false">
                {{data?.address||'-'}}
              </a-form-model-item>
            </a-col>
            <a-col class="borderCol" style="border-bottom:0">
              <a-form-model-item label="联系电话" prop="connectPhone" class="form-w-95" :colon="false">
                {{data?.connectPhone||'-'}}
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
    </div>
    <imgPreview v-model="preview.show" :imgList="preview.list" :index="preview.index" />
  </div>
</template>

<script>
import { imageAccept } from '@/utils/options.js'
import { getAuthorizationHead } from '@/utils/request.js'
import { getBase64 } from '@/utils/util.js'
import imgPreview from '@/components/img-preview'
import modalHeader from '@/components/modal-header'
import { uploadImg } from '@/services/sys'
import { typeList } from '@/services/adminApi'
const BASE_URL = process.env.VUE_APP_API_URL
export default {
  name: 'deviceBackRepairDetail',
  components: {
    modalHeader,
    imgPreview
  },
  data () {
    return {
      labelCol: {
        style: 'width:140px;white-space:normal'
      },
      title: '学生信息详情',
      flag: false,
      id: null,
      type: 1,
      BASE_URL,
      uploadHead: '',
      uploadBaseUrl: `${BASE_URL}/files/`,
      imageAccept,
      uploadUrl: uploadImg(),
      vipImgs: [],
      preview: {
        show: false,
        list: [],
        index: 0
      },
      data: {

      },
      cardTypeName: '',
      registerBatchName: '',
      registerSchoolName: '',
      registerLevelName: '',
      studyTypeName: '',
      studentStatusName: '',
      sexList: [],
      cardList: [],
      piciList: [],
      xiaoList: [],
      cengciList: [],
      xingshiList: [],
      statusList: [],
      rules: {
        name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        // cardType: [{ required: true, message: '请选择设证件类型', trigger: 'change' }],
        // cardId: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
        // registerBatch: [{ required: true, message: '请选择报名批次', trigger: 'change' }],
        // registerSchool: [{ required: true, message: '请选择报名院校', trigger: 'change' }],
        // registerLevel: [{ required: true, message: '请选择所报层次', trigger: 'change' }],
        // registerMajor: [{ required: true, message: '请输入所报专业', trigger: 'blur' }],
        // studyType: [{ required: true, message: '请选择习形式', trigger: 'change' }],
        // studentStatus: [{ required: true, message: '请选择学生状态', trigger: 'change' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.uploadImageUrl = `${BASE_URL}/member/admin/base/member/level/upload`
    this.uploadHead = getAuthorizationHead()
  },
  methods: {
    // 初始化
    onInitial (record) {
      console.log(record)
      this.getInit()
      this.data = record
      if (record.identityImgUrls) {
        var arr = record.identityImgUrls.toString().split(',')
        this.data.identityImgUrls = [this.uploadBaseUrl + arr[0], this.uploadBaseUrl + arr[1]]
      } else {
        this.data.identityImgUrls = []
      }
      if (record.selfImgUrls.length > 0) {
        this.data.selfImgUrls = this.uploadBaseUrl + record.selfImgUrls
      } else {
        this.data.selfImgUrls = ''
      }
      if (record.graduationImgUrls.length > 0) {
        this.data.graduationImgUrls = this.uploadBaseUrl + record.graduationImgUrls
      } else {
        this.data.graduationImgUrls = ''
      }
      if (record.recordFormUrls) {
        this.data.recordFormUrls = this.uploadBaseUrl + record.recordFormUrls
      } else {
        this.data.recordFormUrls = ''
      }
      if (record.nolocalProveUrls) {
        this.data.nolocalProveUrls = this.uploadBaseUrl + record.nolocalProveUrls
      } else {
        this.data.nolocalProveUrls = ''
      }
      if (record.othersProveUrls) {
        this.data.othersProveUrls = this.uploadBaseUrl + record.othersProveUrls
      } else {
        this.data.othersProveUrls = ''
      }
      setTimeout(() => {
        this.cardList.forEach(item => {
          if (+item.id === +this.data.cardType) {
            this.cardTypeName = item.typeNameValue
          }
        })
        this.piciList.forEach(item => {
          if (+item.id === +this.data.registerBatch) {
            this.registerBatchName = item.typeNameValue
          }
        })
        this.xiaoList.forEach(item => {
          if (+item.id === +this.data.registerSchool) {
            this.registerSchoolName = item.typeNameValue
          }
        })
        this.cengciList.forEach(item => {
          if (+item.id === +this.data.registerLevel) {
            this.registerLevelName = item.typeNameValue
          }
        })
        this.xingshiList.forEach(item => {
          if (+item.id === +this.data.studyType) {
            this.studyTypeName = item.typeNameValue
          }
        })
        this.statusList.forEach(item => {
          if (+item.id === +this.data.studentStatus) {
            this.studentStatusName = item.typeNameValue
          }
        })
      }, 800)
    },
    // 初始化获取下拉菜单列表
    getInit () {
      this.getSex()
      this.getCard()
      this.getPici()
      this.getXuexiao()
      this.getCengci()
      this.getXingshi()
      this.getStatus()
    },
    async getSex () {
      const res = await typeList({ type: 1 })
      const { success, data: response, msg } = res
      if (success) {
        this.sexList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getCard () {
      const res = await typeList({ type: 2 })
      const { success, data: response, msg } = res
      if (success) {
        this.cardList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getPici () {
      const res = await typeList({ type: 3 })
      const { success, data: response, msg } = res
      if (success) {
        this.piciList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getXuexiao () {
      const res = await typeList({ type: 4 })
      const { success, data: response, msg } = res
      if (success) {
        this.xiaoList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getCengci () {
      const res = await typeList({ type: 5 })
      const { success, data: response, msg } = res
      if (success) {
        this.cengciList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getXingshi () {
      const res = await typeList({ type: 6 })
      const { success, data: response, msg } = res
      if (success) {
        this.xingshiList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async getStatus () {
      const res = await typeList({ type: 7 })
      const { success, data: response, msg } = res
      if (success) {
        this.statusList = response.records
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    // 预览图片
    async uploadImgPreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.preview.image = file.url || file.preview
      this.preview.visible = true
    },
    // 上传图片相关
    uploadImgChange ({ fileList }) {
      this.vipImgs = fileList.filter(f =>
        imageAccept.split(',').includes(f.type)
      )
      for (let i = 0; i < this.vipImgs.length; i++) {
        const d = this.vipImgs[i]
        if (d.status === 'done' && Object.hasOwnProperty.call(d, 'response')) {
          if (d.response.isSuccess) {
            this.vipImgs.splice(i, 1, {
              name: d.name,
              status: d.status,
              type: d.type,
              uid: d.uid,
              id: d.response.data.data.id,
              validFlag: d.response.data.data.validFlag,
              url: d.response.data.data.url
            })
            this.params.attachmentId = this.vipImgs[0].id
          } else {
            this.vipImgs.splice(i, 1)
            this.params.attachmentId = this.vipImgs[0].id
            this.$message.newFun(d.response.msg, 'error', 3)
          }
        }
      }
      console.log(this.vipImgs, '==')
    },
    close () {
      this.$emit('close')
    },
    // 放大图片
    previewImg (e) {
      const arr = []
      e.forEach((ele) => {
        arr.push(ele)
      })
      this.preview.list = arr
      this.preview.show = true
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>
<style lang="less" scoped>
.baseCol {
  width: 100%;
  min-width: 200px;
}
.imgsDiv{
  position: relative;
  padding-left:15px;
  width:90px;
  &::before{
    content: '*';
    position: absolute;
    top: 5px;
    left: 5%;
    color:#f5222d;
  }
}
.signUp{
  width: 1190px;
  /*margin: 20px auto 0;*/
  min-height: 360px;
  border: 1px solid #d1d4d7;
  .colTitle{
    padding: 0 20px;
    box-sizing: border-box;
    height:50px;
    line-height:50px;
    background: #2a868e;
    color: #fff;
    border: 1px solid #2a868e;
  }
  .borderCol{
    height: 60px;
    padding-top: 14px;
    padding-right: 14px;
    margin-bottom: 0!important;
    border-bottom: 1px solid #d1d4d7;
  }
  .borderColHeight {
    height: 154px;
    padding-top: 14px;
    margin-bottom: 0!important;
    border-bottom: 1px solid #d1d4d7;
  }
  .fileColHeight{
    height: 90px;
    /deep/ .ant-upload{
      height: auto!important;
    }
  }
}
</style>
